;(function () {

    // echarts第一步
    const chartWrapper = document.querySelector('.dist-wrapper .chart');
     // 生成echarts实例
    const chart = echarts.init(chartWrapper);
    
    // echarts第二步
    // 写option配置项
    const colors = ['#d46b08', '#ad4e00', '#873800', '#612500'];
    const option = {
        color: colors,
        tooltip: {
            trigger: 'item',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, .5)',
            borderWidth: 0,
            textStyle: {
                color: '#ffffff',
            },
        },
        series: [
            {
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                // 定义每条数据的样式
                data: pointDistribution
                    .sort(function (a, b) {
                        return a.value - b.value;
                    })
                    .map(function (item, i) {
                        return {
                            name: item.city,
                            value: item.value,
                            // 定义样式
                            label: {
                                color: colors[i],
                            },
                            labelLine: {
                                lineStyle: {
                                    color: colors[i],
                                },
                            },
                        };
                    }),
                roseType: 'radius',
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ],
    };
    
    // echarts第三步
    // 导入配置项
    chart.setOption(option);
    
})();